<template>
  <div class="house-container">
    <div>
      <bgHeader />
      <div class="search">
        <div class="city" @click="$router.push('/city')">
          <span class="my-city">
            {{ cityname }}
          </span>
          <i class="iconfont icon-arrow"></i>
        </div>
        <div class="my-sarch">
          <i class="iconfont icon-seach"></i>
          <span class="text">请输入小区或地址</span>
        </div>
        <i class="iconfont icon-map" @click="$router.push('/map')"></i>
      </div>
    </div>
    <!-- main -->
    <div class="main">
      <div class="pull-menu">
        <van-sticky z-index="999">
          <van-dropdown-menu active-color="#21b97a">
            <pullDownMenu
              title="区域"
              @filter="filterHouseList"
              name="area"
              :areaList="areaList"
            />
            <pullDownMenu
              @filter="filterHouseList"
              title="方式"
              name="rentType"
              :areaList="modeList"
            />
            <pullDownMenu
              title="租金"
              name="price"
              @filter="filterHouseList"
              :areaList="rentList"
            />
            <rightMenu @filter="RightFilterMenu" title="筛选" />
          </van-dropdown-menu>
        </van-sticky>
      </div>
    </div>
    <van-list
      class="van-list-house"
      v-model="loading"
      :finished="finished"
      offset="500"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <houseList />
    </van-list>
  </div>
</template>

<script>
import { getConditionHouse, getHouse } from '@/api'
import bgHeader from '@/components/gbhearder'
import pullDownMenu from './commponents/pull-down-menu.vue'
import rightMenu from './commponents/right-menu.vue'
import houseList from './commponents/houseList.vue'
import { mapMutations } from 'vuex'
export default {
  name: 'houseContainer',
  components: {
    bgHeader,
    pullDownMenu,
    rightMenu,
    houseList
  },
  props: {},
  data() {
    return {
      cityname: this.$store.state.city,
      // 区域列表
      areaList: [],
      // 方式列表
      modeList: [],
      // 租金列表
      rentList: [],
      // 筛选列表
      // 查询房屋信息表
      hoList: {
        cityId: this.$store.state.cityValue,
        // 地区
        area: '',
        // 地铁
        subway: '',
        // 整租
        rentType: '',
        // 复合查询
        more: '',
        // 价格
        price: '',
        // 楼层
        floor: '',
        // 开始页面
        start: '1',
        // 一页数据
        end: 20
      },
      // 房子信息
      myhouseList: [],
      // 下拉刷新
      loading: false,
      // 显示没有更多数据
      finished: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getCtiyInfoByName()
    this.getHouseList()
  },
  methods: {
    ...mapMutations(['SET_HOUSELIST', 'ADD_HOUSELIST']),
    // 获取房源信息
    async getCtiyInfoByName() {
      try {
        const {
          data: { body }
        } = await getConditionHouse({
          id: this.$store.state.cityValue
        })
        this.areaList.push(
          {
            text: body.area.label,
            children: []
          },
          {
            text: body.subway.label,
            children: []
          }
        )
        this.setList(this.areaList[0].children, body.area.children)
        this.setList(this.areaList[1].children, body.subway.children)
        this.setOneList(this.modeList, body.rentType)
        this.setOneList(this.rentList, body.price)
      } catch (err) {
        throw err
      }
    },
    // 获取房子信息
    async getHouseList() {
      // 提示loading
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await getHouse(this.hoList)
      this.SET_HOUSELIST(res.body.list)
      this.$toast.clear()
    },
    // 筛选符合规范的房子信息
    filterHouseList(val, name) {
      if (name === 'area') this.hoList.subway = ''
      if (name === 'subway') this.hoList.area = ''
      this.hoList[name] = val
      this.getHouseList()
    },

    //  下拉刷新列表
    async onLoad() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      this.loading = true
      this.hoList.start++
      const { data: res } = await getHouse(this.hoList)
      if (res.body.list.length === 0) {
        this.loading = false
        this.finished = true
      } else {
        this.ADD_HOUSELIST(res.body.list)
        this.loading = false
      }
      this.$toast.clear()
    },
    // 右侧赛选栏
    RightFilterMenu(more) {
      this.hoList.more = more
      if (this.hoList.more) {
        this.getHouseList()
      }
    },
    // 封装函数
    setList(newlist, oldlist) {
      oldlist.forEach((item, index) => {
        newlist.push({})
        this.$set(newlist[index], 'text', item.label)
        this.$set(newlist[index], 'value', item.value)
        if (!item['children']) {
          this.$set(newlist[index], 'text', item.label)
          this.$set(newlist[index], 'value', item.value)
          this.$set(newlist[index], 'children', [{ text: '' }])
        }
        if (item['children']) {
          this.$set(newlist[index], 'children', [])
          this.setList(newlist[index].children, item.children)
        } else {
          return
        }
      })
    },

    // 封装函数
    setOneList(newlist, oldlist) {
      oldlist.forEach((item, index) => {
        newlist.push({})
        this.$set(newlist[index], 'text', item.label)
        this.$set(newlist[index], 'value', item.value)
        if (item['children']) {
          this.$set(newlist[index], 'children', [])
          this.setList(newlist[index].children, item.children)
        } else {
          return
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.house-container {
  /deep/ .heard-contatiner {
    position: absolute !important;
    height: 100px !important;
  }
  .search {
    position: absolute;
    top: 15px;
    left: 80px;
    border-radius: 5px;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    width: 548px;
    height: 68px;
    margin: 0 20px;
    padding: 10px 10px 10px 16px;
    /deep/ .van-icon-arrow-left {
      font-size: 40px !important;
    }
    .city {
      display: flex;
      justify-content: center;
      align-items: center;
      .my-city {
        font-size: 28px;
      }
      i.icon-arrow {
        font-size: 12px;
        margin-left: 8px;
        color: #7f7f80;
      }
    }
    .my-sarch {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 20px;
      border-left: 1px solid #e5e5e5;
      .text {
        padding-left: 8px;
        font-size: 26px;
        color: #9c9fa1;
      }
      i {
        padding: 0 4px 0 24px !important;
        font-size: 30px;
        color: #9c9fa1;
      }
    }
    i.icon-map {
      position: absolute;
      z-index: 0;
      top: 15px;
      right: -70px;
      font-size: 50px;
      color: #fff;
    }
  }
  .main {
    padding-top: 100px;
    .pull-menu {
      width: 100%;
      display: flex;
      height: 80px;
      :deep(.van-dropdown-menu__item) {
        border-bottom: 2px solid #e4e6f0;
        width: 187.5px;
      }
    }
  }
  :deep(.van-dropdown-menu__bar--opened) {
    z-index: 1 !important;
  }
}
</style>
